<template>
  <view class="main">
    <view class="search">
      <view class="search_b">
        <b-image width="50" height="50" src="https://asset-uat.bisinuolan.cn/bixuan_uni/images/login/search.png" />
        <input v-model="codeName" type="text" placeholder="选择国家" @input="input" />
      </view>
    </view>
    <uni-indexed-list v-if="!filterFlag" :options="list" :showSelect="false" @click="select"></uni-indexed-list>
    <view v-else>
      <view v-show="searchList.length > 0">
        <view v-for="(item, index) in searchList" :key="index" class="list-cell u-border-bottom" @click="select({item:{name:item}})">
          <view>{{ item }}</view>
        </view>
      </view>
      <view v-if="searchList.length <= 0" class="list-cell noDataMessage">抱歉，暂时没找到相关国家或地区</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      source: [],
      list: [],
      searchList: [],
      indexList: [],
      codeName: '',
      filterFlag: false,
    }
  },
  onLoad() {
    const phoneData = this.$api.loginApi.globalRegion()
    phoneData.then(res => {
      console.log(res)
      if (res.code === 0) {
        const data = res.data
        let code = ''
        const letterArr = []
        for (const item in data) {
          if (code === data[item].index_code) {
            continue
          }
          code = data[item].index_code
          letterArr.push(code)
        }
        this.indexList = letterArr
        const newList = []
        this.$nextTick(() => {
          for (const itemKey in letterArr) {
            const newKey = letterArr[itemKey]
            const newData = []
            for (const item in data) {
              if (letterArr[itemKey] === data[item].index_code) {
                const str = data[item].country_cn+'\t'+data[item].number
                newData.push(str)
              }
            }
            const newItem = {
              letter: newKey,
              data: newData
            }
            newList.push(newItem)
          }
          this.list = newList
          this.source = newList
        })
      }
    })
  },
  methods: {
    select(e) {
      const name = e.item.name
      const code = name.split('\t')[1]
      uni.setStorageSync('countryCode', code)
      // this.$navigateTo('/pages/login/mobile', {}, 'redirectTo');
      uni.navigateBack();
    },
    input(e) {
      this.filterFlag = true
      const value = e.detail.value
      const data = this.source
      const filterData = []
      if (value === '') {
        this.filterFlag = false
        return
      }
      for (const item in data) {
        for (const item_child in data[item].data) {
          if (data[item].data[item_child].indexOf(value) !== -1) {
            filterData.push(data[item].data[item_child])
          }
        }
      }
      this.searchList = filterData
    }
  }
}
</script>

<style lang="scss" scoped>
  .noDataMessage{
    background-color: transparent!important;
    justify-content: center;
  }
  ::v-deep{
    .u-index-bar__sidebar {
      top: 55%!important;
    }
  }
  page{
    height: 100vh;
  }
  .main {
    margin-top: 90rpx;
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  /* #ifdef H5 */
  ::v-deep{
    .u-index-anchor--active{
      top: 172rpx!important;
      transform: none!important;
    }
  }
  /* #endif */
  /* #ifdef MP-WEIXIN */
  ::v-deep{
    .u-index-anchor--active{
      top: 90rpx!important;
    }
  }
  /* #endif */
  .search{
    position: fixed;
    z-index: 999;
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    top: 0px;
    /* #endif */
    width: 100%;
    background-color: #F5F5F5;
  }
  .search_b{
    width: calc(100% - 20rpx);
    display: flex;
    margin: 10rpx;
    border-radius: 10rpx;
    background-color: #fff;
    text-indent: 10rpx;
    padding: 10rpx;
    border-radius: 10px;
    align-items: center;
    input {
      width: 100%;
    }
  }
  .list-cell {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24rpx;
    overflow: hidden;
    color: $u-content-color;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    padding: 20rpx 50rpx;
    view:nth-child(1){
      padding-right: 40rpx;
    }
  }
</style>
